xplly'Blog

标签

webpack

前端打包

字数

1297 字

阅读时间

6 分钟

一、介绍

Webpack 是一个前端资源的打包工具，它可以将js、image、css等资源当成一个模块进行打包。

好处

模块化开发
程序员在开发时可以分模块创建不同的js、 css等小文件方便开发，最后使用webpack将这些小文件打包成一个文件，减少了http的请求次数。 webpack可以实现按需打包，为了避免出现打包文件过大可以打包成多个文件。
编译typescript、ES6等高级js语法
随着前端技术的强大，开发中可以使用javascript的很多高级版本，比如：typescript、ES6等，方便开发， webpack可以将打包文件转换成浏览器可识别的js语法。
CSS预编译
webpack允许在开发中使用Sass 和 Less等原生CSS的扩展技术，通过sass-loader、less-loader将Sass 和 Less的语法编译成浏览器可识别的css语法。

缺点

配置有些繁琐
文档不丰富

二、安装

安装Node.js
安装命令
可使用 npm 或 cnpm 全局安装将 --save-dev替换为 -g 指定的版本在程序名后夹加@版本号
npm install --save-dev webpack
npm install --save-dev webpack-cli (4.0以后的版本需要安装webpack-cli)
全局特定版本 npm install webpack@3.6.0 -g

三、入门程序

定义模块

javascript

//将程序使用的js方法抽取到一个js文件，此文件就是一个模块
// 定义add函数 
function add(x, y) {
    return x + y 
}
// function add2(x, y) {
// return x + y+1 
// } 
// 导出add方法 
module.exports.add = add; 
// module.exports ={add,add2};
//如果有多个方法这样导出 
// module.exports.add2 = add2
//如果有多个方法也可以这样导出

定义main.js

javascript

var {add} = require('./model01.js');
var Vue = require('./vue.min'); 
var VM = new Vue({
    el:"#app",//表示当前vue对象接管app的div区域 
    data:{name:'黑马程序员',// 相当于是MVVM中的Model这个角色 
          num1:0, 
          num2:0, 
          result:0, 
          url:'http://www.itcast.cn' 
         },
    methods:{ 
        change:function(){
            //这里使用了导入的model01.js文件中的add方法 
            this.result = add(Number.parseInt(this.num1),Number.parseInt(this.num2)) 
            alert(this.result) 
        } 
    }
 })

打包测试
进入程序目录，执行webpack main.js build.js ，这段指令表示将main.js打包输出为 build.js文件执行完成，观察程序目录是否出现build.js。

在程序中引用build.js即可

总结：

webpack可以将js分模块开发，开发完成对各模块代码打包成一个统一的文件。

前端模块开发的思想和服务端模块开发的思想是一致的，有利于多人协助开发。

四、`webpack-dev-server`

webpack-dev-server开发服务器，它的功能可以实现热加载并且自动刷新浏览器。

4.1 安装配置

使用 webpack-dev-server需要安装三个包

cnpm install webpack@3.6.0 webpack-dev-server@2.9.1 html-webpack-plugin@2.30.1 --save-dev

配置webpack-dev-server

json

//package.json中配置script
{ 
    "scripts": {
        "dev": "webpack‐dev‐server ‐‐inline ‐‐hot ‐‐open ‐‐port 5008" 
    },
    "devDependencies": {
        "html‐webpack‐plugin": "^2.30.1", 
        "webpack": "^3.6.0", 
        "webpack‐dev‐server": "^2.9.1" 
    } 
}
//devDependencies：开发人员在开发过程中所需要的依赖。
//scripts：可执行的命令
//webpack‐dev‐server
--inline：自动刷新 
--hot：热加载 
--port：指定端口 
--open：自动在默认浏览器打开 
--host：可以指定服务器的ip，不指定则为127.0.0.1，如果对外发布则填写公网ip地址

配置webpack.config.js

在项目目录下创建 webpack.config.js， webpack.config.js是webpack的配置文件。在此文件中可以配置应用的入口文件、输出配置、插件等，其中要实现热加载自动刷新功能需要配置html-webpack-plugin插件。

json

var htmlwp = require('html‐webpack‐plugin'); 
module.exports={
    entry:'./src/main.js', //指定打包的入口文件 
    output:{ 
        path : __dirname+'/dist', // 注意：__dirname表示webpack.config.js所在目录的绝对路径 
        filename:'build.js' //输出文件 
    },
    plugins:[ new htmlwp({ 
        title: '首页', //生成的页面标题<head><title>首页</title></head> 
        filename: 'index.html', //webpack‐dev‐server在内存中生成的文件
        //名称，自动将build注入到这 个页面底部，才能实现自动刷新功能 
        template: 'vue_02.html' //根据index1.html这个模板来生成(这个文
        //件请程序员自己生成) 
    }) 
         ] 
}

启动

在项目目录执行 npm run dev

4.2 debug调试

使用了webpack之后就不能采用传统js的调试方法在chrome中打断点

webpack将多个源文件打包成一个文件，并且文件的内容产生了很大的变化，webpack提供devtool进行调试，devtool是基于sourcemap的方式，在调试时会生成一个map文件，其内容记录生成文件和源文件的内容映射，即生成文件中的哪个位置对应源文件中的哪个位置，有了sourcemap就可以在调试时看到源代码。

在webpack.confifig.js中配置：

var htmlwp = require('html‐webpack‐plugin');
module.exports={ 
    entry:'./src/main.js', //指定打包的入口文件 
    output:{ 
        path : __dirname+'/dist', // 注意：__dirname表示webpack.config.js所在目录的绝对路径 
        filename:'build.js' //输出文件 
    },
    devtool: 'eval‐source‐map', //debug新增配置
    ......

在模块的代码需要断点的位置添加debugger

javascript

// 定义add函数 
function add(x, y) { 
    debugger 
    return x + y 
}

一、介绍 ​

二、安装 ​

三、入门程序 ​

四、webpack-dev-server ​

4.1 安装配置 ​

4.2 debug调试 ​

一、介绍

二、安装

三、入门程序

四、`webpack-dev-server`

4.1 安装配置

4.2 debug调试